<html>

<body>
  <div>
    <div onclick="preview(`https://cdnvideo.zhongbiao001.com/yjzb_xcx/tixian.png`)">预览</div>
    <div onclick="onDownload()">下载11</div>
  </div>
</body>
<script>
  // 预览文件
  function preview(url) {
      //创建预览器
      let container = document.createElement("div");
      container.classList.add("preview-container");
      container.onclick = function () {
        container.remove();
      }
      //创建预览图片
      let innerImg = document.createElement("img");
      innerImg.src = url;
      innerImg.classList.add("pic");
      //绑定滚动事件
      container.onwheel = function (event) {
        const width = getComputedStyle(innerImg).width.slice(0, -2);
        const height = getComputedStyle(innerImg).height.slice(0, -2);
        if (event.deltaY > 0) {
          //向上滚动放大
          innerImg.style.width = parseInt(width) * 1.1 + "px";
          innerImg.style.height = parseInt(height) * 1.1 + "px";
        } else if (event.deltaY < 0) {
          //向下滚动缩小
          innerImg.style.width = parseInt(width) * 0.9 + "px";
          innerImg.style.height = parseInt(height) * 0.9 + "px";
        }
      }
      //将图片添加到预览器
      container.append(innerImg);
      //将预览器添加到 body 中
      document.body.append(container);
  }

  // 下载文件
  function onDownload(filepath, filename) {
    const x = new XMLHttpRequest()
    // pdf等文件格式 同
    x.open('GET', 'https://cdnvideo.zhongbiao001.com/yjzb_xcx/tixian.png', true)
    x.responseType = 'blob'
    x.onload = function () {
      const blob = x.response
      const url = window.URL.createObjectURL(blob)
      // 判断是否是IE浏览器
      if (window.navigator.msSaveBlob) {
        try {
          window.navigator.msSaveBlob(blob, filename)
        } catch (e) { }
      } else {
        const a = document.createElement('a')
        a.href = url
        a.download = '资质文件'
        a.click()
      }
    }
    x.send()
  }
</script>
<style>
  .img {
    width: 200px;
    height: 200px;
    object-fit: cover;
  }

  .preview {
    cursor: pointer;
  }

  .preview-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .preview-container .pic {
    max-width: 90%;
    max-height: 90%;
    min-width: 5%;
    min-height: 5%;
    object-fit: contain;
  }
</style>

</html>